<template>
	<view>
		<view v-for="(item, index) in chartsData" :key="index" :id="`chart${index}`" style="width: 600px;height:400px;">
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts'

	export default {
		props: {
			tags: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				chartsData: [] // 存储多个图表数据
			}
		},
		mounted() {
			this.fetchData()
		},
		methods: {
			fetchData() {
				console.log(this.tags,"tagstagstags")
				// 模拟异步获取数据
				setTimeout(() => {
					this.chartsData = [{
							name: '图表1',
							data: [120, 200, 150, 80, 70, 110, 130]
						},
						{
							name: '图表2',
							data: [220, 180, 190, 235, 290, 330, 310]
						},
						{
							name: '图表3',
							data: [220, 180, 190, 235, 290, 330, 310]
						}
						// 更多图表数据...
					]
					this.$nextTick(() => {
						this.renderCharts()
					})
				}, 1000)
			},
			renderCharts() {
				this.chartsData.forEach((item, index) => {
					const chartDom = document.getElementById(`chart${index}`)
					const myChart = echarts.init(chartDom)
					const option = {
						title: {
							text: item.name
						},
						tooltip: {
							trigger: 'axis'
						},
						xAxis: {
							type: 'category',
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							data: item.data,
							type: 'line',
							smooth: true
						}]
					}
					myChart.setOption(option)
				})
			}
		}
	}
</script>

<style scoped>
	/* 你可以在这里添加样式 */
</style>